<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>智慧大棚系统 - 订单管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@3.3.11/dist/vue.global.prod.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.7.7/dist/axios.min.js"></script>

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#2E7D32', // 主色调：绿色，代表农业、生长
                        secondary: '#1976D2', // 辅助色：蓝色，代表科技、数据
                        accent: '#F59E0B', // 强调色：橙色，代表警告、提醒
                        neutral: {
                            100: '#F9FAFB',
                            200: '#F3F4F6',
                            300: '#E5E7EB',
                            400: '#D1D5DB',
                            500: '#9CA3AF',
                            600: '#6B7280',
                            700: '#4B5563',
                            800: '#1F2937',
                            900: '#111827'
                        }
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
                        'card-hover': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                    }
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-grid {
                background-image: linear-gradient(#e5e7eb 1px, transparent 1px),
                                  linear-gradient(to right, #e5e7eb 1px, transparent 1px);
                background-size: 20px 20px;
            }
            .errmsg {
                @apply text-red-500 text-xs ml-2;
            }
            .management-title {
                @apply text-xl font-bold text-neutral-800 mb-4 border-b border-neutral-200 pb-2;
            }
            .management-title-dialog {
                @apply text-lg font-bold text-neutral-800 mb-4 border-b border-neutral-200 pb-2;
            }
            .search-container {
                @apply flex flex-wrap gap-2 mb-4;
            }
            .search-input {
                @apply px-3 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
            .search-button {
                @apply px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors duration-200;
            }
            .leftmargin {
                @apply ml-2;
            }
            .button-spacing {
                @apply mb-4;
            }
            .button {
                @apply px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors duration-200;
            }
            .editButton {
                @apply bg-blue-600 hover:bg-blue-700;
            }
            .deleteButton {
                @apply bg-red-600 hover:bg-red-700;
            }
            .detailButton {
                @apply bg-purple-600 hover:bg-purple-700;
            }
            table {
                @apply w-full border-collapse;
            }
            th {
                @apply px-4 py-2 bg-neutral-100 text-left text-xs font-medium text-neutral-600 uppercase tracking-wider border border-neutral-200;
            }
            td {
                @apply px-4 py-2 border border-neutral-200;
            }
            tr:nth-child(even) {
                @apply bg-neutral-50;
            }
            tr:hover {
                @apply bg-neutral-100 transition-colors duration-150;
            }
            .pagination {
                @apply flex mt-4 space-x-2;
            }
            .pagination button {
                @apply px-3 py-1 border border-neutral-300 rounded hover:bg-neutral-100 transition-colors duration-150;
            }
            dialog {
                @apply fixed inset-0 m-auto w-1/2 max-w-md p-6 rounded-lg shadow-xl z-50 bg-white border-none;
            }
            dialog::backdrop {
                @apply bg-black/50 backdrop-blur-sm;
            }
            dialog form {
                @apply space-y-4;
            }
            dialog label {
                @apply block text-sm font-medium text-neutral-700 mb-1;
            }
            dialog input, dialog select, dialog textarea {
                @apply w-full px-3 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200;
            }
            dialog textarea {
                @apply h-24 resize-none;
            }
            .sidebar {
                @apply w-64 bg-white border-r border-neutral-200 h-screen fixed left-0 top-0 pt-20 overflow-y-auto;
            }
            .sidebar ul {
                @apply space-y-1 px-2;
            }
            .sidebar li {
                @apply rounded-md;
            }
            .sidebar a {
                @apply block px-4 py-2 text-neutral-700 hover:bg-primary/10 hover:text-primary rounded-md transition-colors duration-200;
            }
            .sidebar a.active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .header {
                @apply bg-white shadow-md fixed w-full z-50 h-20 flex items-center px-6;
            }
            .header h1 {
                @apply text-xl font-bold text-neutral-800 ml-2;
            }
            .content {
                @apply ml-64 pt-20 px-6 pb-10;
            }
            .highlight {
                @apply bg-yellow-100;
            }
            .order-detail-card {
                @apply bg-white rounded-lg shadow-card p-4 mb-4;
            }
            .order-detail-label {
                @apply text-sm font-medium text-neutral-600;
            }
            .order-detail-value {
                @apply text-neutral-800;
            }
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header">
            <!-- 加入 logo -->
            <div class="bg-primary text-white p-2 rounded-lg">
                <i class="fa-solid fa-farm text-xl"></i>
            </div>
            <h1>智慧大棚管理系统</h1>
        </div>

        <div class="container">
            <!-- 左侧导航栏 -->
            <div class="sidebar">
                <ul>
                    <li><a href="/greenhouse/GreenHouseType/list.html">大棚种类管理</a></li>
                    <li><a href="/greenhouse/GreenHouseLocation/list.html">大棚位置管理</a></li>
                    <li><a href="/greenhouse/GreenHouse/list.html">大棚管理</a></li>
                    <li><a href="/greenhouse/Crops/list.html">农产品管理</a></li>
                    <li><a href="/greenhouse/Plan/list.html">计划管理</a></li>
                    <li><a href="/greenhouse/Input/list.html">投入管理</a></li>
                    <li><a href="/greenhouse/Order/list.html" >订单管理</a></li>
                    <li><a href="/greenhouse/Employee/list.html">员工管理</a></li>
                    <li><a href="/greenhouse/Income/list.html">收入管理</a></li>
                </ul>
            </div>

            <!-- 内容区域 -->
            <div class="content">
                <!-- 订单列表视图 -->
                <div id="order-list-view" v-show="currentView === 'orderList'">
                    <h2 class="management-title">订单管理</h2>

                    <div class="search-container">
                        <input type="text" class="search-input" placeholder="输入预定方" v-model="queryParam.customer"
                            @keyup.enter="query(1)">
                        <input type="text" class="search-input" placeholder="输入订单编号" v-model="queryParam.orderNo"
                            @keyup.enter="query(1)">
                        <button class="search-button leftmargin" @click="query(1)">查询</button>
                        <button class="button bg-neutral-600" @click="resetQuery">重置</button>
                    </div>

                    <div class="button-spacing">
                        <button class="button" @click="openAddDialog">添加订单</button>
                    </div>

                    <table>
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>订单编号</th>
                                <th>预定方</th>
                                <th>电话</th>
                                <th>地址</th>
                                <th>订货时间</th>
                                <th>交付时间</th>
                                <th>总收入</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in filteredOrders" :key="item.id">
                                <td>{{index + 1}}</td>
                                <td v-html="highlightText(item.orderNo, queryParam.orderNo)"></td>
                                <td v-html="highlightText(item.customer, queryParam.customer)"></td>
                                <td>{{item.phone}}</td>
                                <td>{{item.address}}</td>
                                <td>{{item.orderDate}}</td>
                                <td>{{item.deliveryDate}}</td>
                                <td>{{calculateTotalAmount(item.id).toFixed(2)}}</td>
                                <td>
                                    <button class="button editButton leftmargin" @click="openEditDialog(item.id)">编辑</button>
                                    <button class="button deleteButton leftmargin" @click="openDeleteConfirmDialog(item.id)">删除</button>
                                    <button class="button detailButton leftmargin" @click="openOrderDetail(item.id)">订单明细</button>
                                </td>
                            </tr>
                            <tr v-if="filteredOrders.length === 0">
                                <td colspan="9" class="text-center py-4 text-neutral-500">没有找到匹配的记录</td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- 分页组件 -->
                    <div class="pagination" v-if="page.pages > 1">
                        <button @click="query(1)">首页</button>
                        <button v-for="index in page.pages" @click="query(index)">{{index}}</button>
                        <button @click="query(page.pages)">末页</button>
                    </div>
                </div>

                <!-- 订单明细视图 -->
                <div id="order-detail-view" v-show="currentView === 'orderDetail'">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="management-title">订单明细</h2>
                        <button class="button" @click="goBackToList">返回列表</button>
                    </div>

                    <!-- 订单基本信息卡片 -->
                    <div class="order-detail-card">
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <div class="order-detail-label">订单编号:</div>
                                <div class="order-detail-value font-medium">{{currentOrder.orderNo}}</div>
                            </div>
                            <div>
                                <div class="order-detail-label">预定方:</div>
                                <div class="order-detail-value font-medium">{{currentOrder.customer}}</div>
                            </div>
                            <div>
                                <div class="order-detail-label">电话:</div>
                                <div class="order-detail-value font-medium">{{currentOrder.phone}}</div>
                            </div>
                            <div>
                                <div class="order-detail-label">地址:</div>
                                <div class="order-detail-value font-medium">{{currentOrder.address}}</div>
                            </div>
                            <div>
                                <div class="order-detail-label">订货时间:</div>
                                <div class="order-detail-value font-medium">{{currentOrder.orderDate}}</div>
                            </div>
                            <div>
                                <div class="order-detail-label">交付时间:</div>
                                <div class="order-detail-value font-medium">{{currentOrder.deliveryDate}}</div>
                            </div>
                        </div>
                    </div>

                    <div class="button-spacing">
                        <button class="button" @click="openAddItemDialog">添加农作物</button>
                    </div>

                    <table>
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>农作物</th>
                                <th>需求(kg)</th>
                                <th>价格(kg/元)</th>
                                <th>付款金额</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(item, index) in currentOrderItems" :key="item.id">
                                <td>{{index + 1}}</td>
                                <td>{{getCropName(item.cropId)}}</td>
                                <td>{{item.quantity}}</td>
                                <td>{{item.price}}</td>
                                <td>{{(item.quantity * item.price).toFixed(2)}}</td>
                                <td>
                                    <button class="button editButton leftmargin" @click="openEditItemDialog(item.id)">编辑</button>
                                    <button class="button deleteButton leftmargin" @click="openDeleteItemConfirmDialog(item.id)">删除</button>
                                </td>
                            </tr>
                            <tr v-if="currentOrderItems.length === 0">
                                <td colspan="6" class="text-center py-4 text-neutral-500">没有订单明细</td>
                            </tr>
                        </tbody>
                    </table>

                    <div class="mt-4 text-right">
                        <span class="font-bold">订单总金额: {{calculateOrderTotal().toFixed(2)}} 元</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 添加订单的对话框 -->
        <dialog ref="addDialogRef">
            <h2 class="management-title-dialog">添加订单</h2>
            <form>
                <label>订单编号：</label>
                <input type="text" placeholder="输入订单编号" v-model="addParam.orderNo">
                <span class="errmsg" v-show="errShow.orderNo">请输入订单编号</span>

                <label>预定方：</label>
                <input type="text" placeholder="输入预定方" v-model="addParam.customer">
                <span class="errmsg" v-show="errShow.customer">请输入预定方</span>

                <label>电话：</label>
                <input type="text" placeholder="输入电话" v-model="addParam.phone">
                <span class="errmsg" v-show="errShow.phone">请输入电话</span>

                <label>地址：</label>
                <input type="text" placeholder="输入地址" v-model="addParam.address">
                <span class="errmsg" v-show="errShow.address">请输入地址</span>

                <label>订货时间：</label>
                <input type="date" v-model="addParam.orderDate">
                <span class="errmsg" v-show="errShow.orderDate">请选择订货时间</span>

                <label>交付时间：</label>
                <input type="date" v-model="addParam.deliveryDate">
                <span class="errmsg" v-show="errShow.deliveryDate">请选择交付时间</span>

                <div class="flex justify-end space-x-2">
                    <button class="button" type="button" @click="addOrder">保存</button>
                    <button class="button bg-neutral-600" type="button" @click="closeAddDialog">取消</button>
                </div>
                <span class="errmsg" v-show="errShow.addError">添加失败,请重新输入或者联系管理员</span>
            </form>
        </dialog>

        <!-- 编辑订单的对话框 -->
        <dialog ref="editDialogRef">
            <h2 class="management-title-dialog">编辑订单</h2>
            <form>
                <label>订单编号：</label>
                <input type="text" placeholder="输入订单编号" v-model="updateParam.orderNo">
                <span class="errmsg" v-show="errShow.orderNo">请输入订单编号</span>

                <label>预定方：</label>
                <input type="text" placeholder="输入预定方" v-model="updateParam.customer">
                <span class="errmsg" v-show="errShow.customer">请输入预定方</span>

                <label>电话：</label>
                <input type="text" placeholder="输入电话" v-model="updateParam.phone">
                <span class="errmsg" v-show="errShow.phone">请输入电话</span>

                <label>地址：</label>
                <input type="text" placeholder="输入地址" v-model="updateParam.address">
                <span class="errmsg" v-show="errShow.address">请输入地址</span>

                <label>订货时间：</label>
                <input type="date" v-model="updateParam.orderDate">
                <span class="errmsg" v-show="errShow.orderDate">请选择订货时间</span>

                <label>交付时间：</label>
                <input type="date" v-model="updateParam.deliveryDate">
                <span class="errmsg" v-show="errShow.deliveryDate">请选择交付时间</span>

                <div class="flex justify-end space-x-2">
                    <button class="button" type="button" @click="updateOrder">保存</button>
                    <button class="button bg-neutral-600" type="button" @click="closeEditDialog">取消</button>
                </div>
                <span class="errmsg" v-show="errShow.updateError">更新失败,请重新输入或者联系管理员</span>
            </form>
        </dialog>

        <!-- 删除订单确认对话框 -->
        <dialog ref="confirmDialogRef">
            <p>您确定删除该订单吗？</p>
            <div class="flex justify-end space-x-2">
                <button class="button" @click="confirmDeleteOrder">确定</button>
                <button class="button bg-neutral-600" @click="closeDeleteConfirmDialog">取消</button>
            </div>
        </dialog>

        <!-- 添加订单明细的对话框 -->
        <dialog ref="addItemDialogRef">
            <h2 class="management-title-dialog">添加农作物</h2>
            <form>
                <label>农作物：</label>
                <select v-model="addItemParam.cropId">
                    <option value="">请选择农作物</option>
                    <option v-for="crop in allCrops" :value="crop.id">{{crop.name}}</option>
                </select>
                <span class="errmsg" v-show="errShow.cropId">请选择农作物</span>

                <label>需求(kg)：</label>
                <input type="number" placeholder="输入需求数量" v-model.number="addItemParam.quantity">
                <span class="errmsg" v-show="errShow.quantity">请输入需求数量</span>

                <label>价格(kg/元)：</label>
                <input type="number" placeholder="输入价格" v-model.number="addItemParam.price">
                <span class="errmsg" v-show="errShow.price">请输入价格</span>

                <div class="flex justify-end space-x-2">
                    <button class="button" type="button" @click="addOrderItem">保存</button>
                    <button class="button bg-neutral-600" type="button" @click="closeAddItemDialog">取消</button>
                </div>
                <span class="errmsg" v-show="errShow.addItemError">添加失败,请重新输入或者联系管理员</span>
            </form>
        </dialog>

        <!-- 编辑订单明细的对话框 -->
        <dialog ref="editItemDialogRef">
            <h2 class="management-title-dialog">编辑农作物</h2>
            <form>
                <label>农作物：</label>
                <select v-model="updateItemParam.cropId">
                    <option value="">请选择农作物</option>
                    <option v-for="crop in allCrops" :value="crop.id">{{crop.name}}</option>
                </select>
                <span class="errmsg" v-show="errShow.cropId">请选择农作物</span>

                <label>需求(kg)：</label>
                <input type="number" placeholder="输入需求数量" v-model.number="updateItemParam.quantity">
                <span class="errmsg" v-show="errShow.quantity">请输入需求数量</span>

                <label>价格(kg/元)：</label>
                <input type="number" placeholder="输入价格" v-model.number="updateItemParam.price">
                <span class="errmsg" v-show="errShow.price">请输入价格</span>

                <div class="flex justify-end space-x-2">
                    <button class="button" type="button" @click="updateOrderItem">保存</button>
                    <button class="button bg-neutral-600" type="button" @click="closeEditItemDialog">取消</button>
                </div>
                <span class="errmsg" v-show="errShow.updateItemError">更新失败,请重新输入或者联系管理员</span>
            </form>
        </dialog>

        <!-- 删除订单明细确认对话框 -->
        <dialog ref="confirmItemDialogRef">
            <p>您确定删除该订单明细项吗？</p>
            <div class="flex justify-end space-x-2">
                <button class="button" @click="confirmDeleteOrderItem">确定</button>
                <button class="button bg-neutral-600" @click="closeDeleteItemConfirmDialog">取消</button>
            </div>
        </dialog>
    </div>

    <script>
        const {
            createApp,
            ref,
            reactive,
            onMounted,
            computed
        } = Vue;

        createApp({
            setup() {
                // 当前视图：orderList 或 orderDetail
                const currentView = ref('orderList');
                
                // 当前查看的订单ID
                const currentOrderId = ref(null);
                
                // 当前订单信息
                const currentOrder = ref({});
                
                // 当前订单的明细项
                const currentOrderItems = ref([]);
                
                // 查询参数
                const queryParam = reactive({
                    customer: '',
                    orderNo: '',
                    pageNum: 1,
                    pageSize: 10
                });

                // 所有订单数据
                const allOrders = ref([
                    {
                        id: 1,
                        orderNo: 'ORD-2023-001',
                        customer: '城市超市',
                        phone: '13800138001',
                        address: '北京市朝阳区建国路88号',
                        orderDate: '2023-06-15',
                        deliveryDate: '2023-06-20'
                    },
                    {
                        id: 2,
                        orderNo: 'ORD-2023-002',
                        customer: '生鲜电商',
                        phone: '13900139002',
                        address: '上海市浦东新区张江高科技园区',
                        orderDate: '2023-06-16',
                        deliveryDate: '2023-06-22'
                    },
                    {
                        id: 3,
                        orderNo: 'ORD-2023-003',
                        customer: '农贸市场',
                        phone: '13700137003',
                        address: '广州市天河区天河路228号',
                        orderDate: '2023-06-17',
                        deliveryDate: '2023-06-21'
                    }
                ]);

                // 所有订单明细数据
                const allOrderItems = ref([
                    { id: 1, orderId: 1, cropId: 1, quantity: 50, price: 8.5 },
                    { id: 2, orderId: 1, cropId: 2, quantity: 30, price: 6.0 },
                    { id: 3, orderId: 2, cropId: 3, quantity: 20, price: 7.2 },
                    { id: 4, orderId: 2, cropId: 4, quantity: 40, price: 5.8 },
                    { id: 5, orderId: 3, cropId: 5, quantity: 60, price: 4.5 },
                    { id: 6, orderId: 3, cropId: 6, quantity: 25, price: 9.0 }
                ]);

                // 所有农作物数据
                const allCrops = ref([
                    { id: 1, name: '番茄' },
                    { id: 2, name: '黄瓜' },
                    { id: 3, name: '辣椒' },
                    { id: 4, name: '茄子' },
                    { id: 5, name: '生菜' },
                    { id: 6, name: '菠菜' },
                    { id: 7, name: '草莓' },
                    { id: 8, name: '西瓜' },
                    { id: 9, name: '甜瓜' },
                    { id: 10, name: '西葫芦' },
                    { id: 11, name: '胡萝卜' }
                ]);

                // 分页结果
                const page = reactive({
                    records: [],
                    total: 0,
                    pages: 1,
                    pageNum: 1,
                    pageSize: 10
                });

                // 高亮显示匹配文本
                const highlightText = (text, keyword) => {
                    if (!keyword || !text) return text;
                    const regex = new RegExp(keyword, 'gi');
                    return text.replace(regex, match => `<span class="highlight">${match}</span>`);
                };

                // 过滤订单（模糊查询）
                const filteredOrders = computed(() => {
                    let orders = [...allOrders.value];

                    // 预定方模糊查询
                    if (queryParam.customer) {
                        const keyword = queryParam.customer.toLowerCase();
                        orders = orders.filter(item =>
                            item.customer.toLowerCase().includes(keyword)
                        );
                    }

                    // 订单编号模糊查询
                    if (queryParam.orderNo) {
                        const keyword = queryParam.orderNo.toLowerCase();
                        orders = orders.filter(item =>
                            item.orderNo.toLowerCase().includes(keyword)
                        );
                    }

                    // 分页处理
                    const start = (queryParam.pageNum - 1) * queryParam.pageSize;
                    const end = start + queryParam.pageSize;

                    // 更新分页信息
                    page.total = orders.length;
                    page.pages = Math.ceil(page.total / queryParam.pageSize);

                    return orders.slice(start, end);
                });

                // 添加订单参数
                const addParam = reactive({
                    orderNo: '',
                    customer: '',
                    phone: '',
                    address: '',
                    orderDate: '',
                    deliveryDate: ''
                });

                // 更新订单参数
                const updateParam = reactive({
                    id: null,
                    orderNo: '',
                    customer: '',
                    phone: '',
                    address: '',
                    orderDate: '',
                    deliveryDate: ''
                });

                // 添加订单明细参数
                const addItemParam = reactive({
                    orderId: null,
                    cropId: '',
                    quantity: 0,
                    price: 0
                });

                // 更新订单明细参数
                const updateItemParam = reactive({
                    id: null,
                    orderId: null,
                    cropId: '',
                    quantity: 0,
                    price: 0
                });

                // 错误提示
                const errShow = reactive({
                    orderNo: false,
                    customer: false,
                    phone: false,
                    address: false,
                    orderDate: false,
                    deliveryDate: false,
                    cropId: false,
                    quantity: false,
                    price: false,
                    addError: false,
                    updateError: false,
                    addItemError: false,
                    updateItemError: false
                });

                // 对话框引用
                const addDialogRef = ref(null);
                const editDialogRef = ref(null);
                const confirmDialogRef = ref(null);
                const addItemDialogRef = ref(null);
                const editItemDialogRef = ref(null);
                const confirmItemDialogRef = ref(null);

                // 当前操作的ID
                const currentId = ref(null);
                const currentItemId = ref(null);

                // 重置查询条件
                const resetQuery = () => {
                    queryParam.customer = '';
                    queryParam.orderNo = '';
                    queryParam.pageNum = 1;
                    query(1);
                };

                // 查询数据
                const query = (pageNum) => {
                    queryParam.pageNum = pageNum;
                    // 这里不需要实际API调用，因为使用了computed属性自动过滤
                };

                // 生命周期钩子 - 页面加载完成后执行
                onMounted(() => {
                    // 初始化加载数据
                    query(1);
                    
                    // 设置默认日期为今天
                    const today = new Date().toISOString().split('T')[0];
                    addParam.orderDate = today;
                    addParam.deliveryDate = today;
                });

                // 打开添加订单对话框
                const openAddDialog = () => {
                    // 重置添加参数
                    const today = new Date().toISOString().split('T')[0];
                    Object.assign(addParam, {
                        orderNo: '',
                        customer: '',
                        phone: '',
                        address: '',
                        orderDate: today,
                        deliveryDate: today
                    });

                    // 重置错误提示
                    resetErrorShow();

                    // 显示对话框
                    addDialogRef.value.showModal();
                };

                // 关闭添加订单对话框
                const closeAddDialog = () => {
                    addDialogRef.value.close();
                };

                // 添加订单
                const addOrder = () => {
                    // 表单验证
                    if (!validateAddOrderForm()) {
                        return;
                    }

                    // 模拟API调用
                    setTimeout(() => {
                        // 生成新ID
                        const newId = Math.max(...allOrders.value.map(item => item.id)) + 1;

                        // 添加新记录
                        allOrders.value.push({
                            id: newId,
                            orderNo: addParam.orderNo,
                            customer: addParam.customer,
                            phone: addParam.phone,
                            address: addParam.address,
                            orderDate: addParam.orderDate,
                            deliveryDate: addParam.deliveryDate
                        });

                        // 重新查询
                        query(1);
                        closeAddDialog();
                        alert('添加成功');
                    }, 300);
                };

                // 打开编辑订单对话框
                const openEditDialog = (id) => {
                    // 找到要编辑的数据
                    const item = allOrders.value.find(item => item.id === id);

                    if (item) {
                        // 填充编辑表单
                        Object.assign(updateParam, {
                            id: item.id,
                            orderNo: item.orderNo,
                            customer: item.customer,
                            phone: item.phone,
                            address: item.address,
                            orderDate: item.orderDate,
                            deliveryDate: item.deliveryDate
                        });

                        // 重置错误提示
                        resetErrorShow();

                        // 显示对话框
                        editDialogRef.value.showModal();
                    }
                };

                // 关闭编辑订单对话框
                const closeEditDialog = () => {
                    editDialogRef.value.close();
                };

                // 更新订单
                const updateOrder = () => {
                    // 表单验证
                    if (!validateUpdateOrderForm()) {
                        return;
                    }

                    // 模拟API调用
                    setTimeout(() => {
                        // 找到要更新的记录索引
                        const index = allOrders.value.findIndex(item => item.id === updateParam.id);

                        if (index !== -1) {
                            // 更新记录
                            allOrders.value[index] = {
                                ...allOrders.value[index],
                                orderNo: updateParam.orderNo,
                                customer: updateParam.customer,
                                phone: updateParam.phone,
                                address: updateParam.address,
                                orderDate: updateParam.orderDate,
                                deliveryDate: updateParam.deliveryDate
                            };

                            // 如果当前正在查看该订单，也更新当前订单数据
                            if (currentOrderId.value === updateParam.id) {
                                currentOrder.value = allOrders.value[index];
                            }

                            // 重新查询
                            query(queryParam.pageNum);

                            // 显示成功消息
                            alert('订单信息已更新');

                            // 关闭对话框
                            closeEditDialog();
                        } else {
                            errShow.updateError = true;
                        }
                    }, 300);
                };

                // 打开删除订单确认对话框
                const openDeleteConfirmDialog = (id) => {
                    currentId.value = id;
                    confirmDialogRef.value.showModal();
                };

                // 关闭删除订单确认对话框
                const closeDeleteConfirmDialog = () => {
                    confirmDialogRef.value.close();
                };

                // 确认删除订单
                const confirmDeleteOrder = () => {
                    // 模拟API调用
                    setTimeout(() => {
                        // 删除订单
                        allOrders.value = allOrders.value.filter(item => item.id !== currentId.value);
                        
                        // 删除相关的订单明细
                        allOrderItems.value = allOrderItems.value.filter(item => item.orderId !== currentId.value);

                        // 如果正在查看被删除的订单，返回列表视图
                        if (currentOrderId.value === currentId.value) {
                            goBackToList();
                        }

                        // 重新查询
                        query(queryParam.pageNum);

                        closeDeleteConfirmDialog();
                        alert('订单已删除');
                    }, 300);
                };

                // 打开订单明细页面
                const openOrderDetail = (id) => {
                    // 找到订单信息
                    const order = allOrders.value.find(item => item.id === id);
                    
                    if (order) {
                        currentOrderId.value = id;
                        currentOrder.value = order;
                        
                        // 找到该订单的所有明细项
                        currentOrderItems.value = allOrderItems.value.filter(item => item.orderId === id);
                        
                        // 切换到订单明细视图
                        currentView.value = 'orderDetail';
                    }
                };

                // 返回订单列表页面
                const goBackToList = () => {
                    currentView.value = 'orderList';
                };

                // 打开添加订单明细对话框
                const openAddItemDialog = () => {
                    // 重置添加参数
                    Object.assign(addItemParam, {
                        orderId: currentOrderId.value,
                        cropId: '',
                        quantity: 0,
                        price: 0
                    });

                    // 重置错误提示
                    resetErrorShow();

                    // 显示对话框
                    addItemDialogRef.value.showModal();
                };

                // 关闭添加订单明细对话框
                const closeAddItemDialog = () => {
                    addItemDialogRef.value.close();
                };

                // 添加订单明细
                const addOrderItem = () => {
                    // 表单验证
                    if (!validateAddItemForm()) {
                        return;
                    }

                    // 模拟API调用
                    setTimeout(() => {
                        // 生成新ID
                        const newId = allOrderItems.value.length > 0 
                            ? Math.max(...allOrderItems.value.map(item => item.id)) + 1 
                            : 1;

                        // 添加新记录
                        allOrderItems.value.push({
                            id: newId,
                            orderId: addItemParam.orderId,
                            cropId: addItemParam.cropId,
                            quantity: addItemParam.quantity,
                            price: addItemParam.price
                        });

                        // 更新当前订单明细
                        currentOrderItems.value = allOrderItems.value.filter(item => item.orderId === currentOrderId.value);

                        closeAddItemDialog();
                        alert('添加成功');
                    }, 300);
                };

                // 打开编辑订单明细对话框
                const openEditItemDialog = (id) => {
                    // 找到要编辑的数据
                    const item = allOrderItems.value.find(item => item.id === id);

                    if (item) {
                        // 填充编辑表单
                        Object.assign(updateItemParam, {
                            id: item.id,
                            orderId: item.orderId,
                            cropId: item.cropId,
                            quantity: item.quantity,
                            price: item.price
                        });

                        // 重置错误提示
                        resetErrorShow();

                        // 显示对话框
                        editItemDialogRef.value.showModal();
                    }
                };

                // 关闭编辑订单明细对话框
                const closeEditItemDialog = () => {
                    editItemDialogRef.value.close();
                };

                // 更新订单明细
                const updateOrderItem = () => {
                    // 表单验证
                    if (!validateUpdateItemForm()) {
                        return;
                    }

                    // 模拟API调用
                    setTimeout(() => {
                        // 找到要更新的记录索引
                        const index = allOrderItems.value.findIndex(item => item.id === updateItemParam.id);

                        if (index !== -1) {
                            // 更新记录
                            allOrderItems.value[index] = {
                                ...allOrderItems.value[index],
                                cropId: updateItemParam.cropId,
                                quantity: updateItemParam.quantity,
                                price: updateItemParam.price
                            };

                            // 更新当前订单明细
                            currentOrderItems.value = allOrderItems.value.filter(item => item.orderId === currentOrderId.value);

                            // 显示成功消息
                            alert('订单明细已更新');

                            // 关闭对话框
                            closeEditItemDialog();
                        } else {
                            errShow.updateItemError = true;
                        }
                    }, 300);
                };

                // 打开删除订单明细确认对话框
                const openDeleteItemConfirmDialog = (id) => {
                    currentItemId.value = id;
                    confirmItemDialogRef.value.showModal();
                };

                // 关闭删除订单明细确认对话框
                const closeDeleteItemConfirmDialog = () => {
                    confirmItemDialogRef.value.close();
                };

                // 确认删除订单明细
                const confirmDeleteOrderItem = () => {
                    // 模拟API调用
                    setTimeout(() => {
                        // 删除订单明细
                        allOrderItems.value = allOrderItems.value.filter(item => item.id !== currentItemId.value);

                        // 更新当前订单明细
                        currentOrderItems.value = allOrderItems.value.filter(item => item.orderId === currentOrderId.value);

                        closeDeleteItemConfirmDialog();
                        alert('订单明细已删除');
                    }, 300);
                };

                // 计算订单总收入
                const calculateTotalAmount = (orderId) => {
                    const items = allOrderItems.value.filter(item => item.orderId === orderId);
                    return items.reduce((sum, item) => sum + (item.quantity * item.price), 0);
                };

                // 计算当前订单总金额
                const calculateOrderTotal = () => {
                    return currentOrderItems.value.reduce((sum, item) => sum + (item.quantity * item.price), 0);
                };

                // 获取农作物名称
                const getCropName = (cropId) => {
                    const crop = allCrops.value.find(crop => crop.id === cropId);
                    return crop ? crop.name : '未知农作物';
                };

                // 验证添加订单表单
                const validateAddOrderForm = () => {
                    let isValid = true;

                    resetErrorShow();

                    if (!addParam.orderNo) {
                        errShow.orderNo = true;
                        isValid = false;
                    }

                    if (!addParam.customer) {
                        errShow.customer = true;
                        isValid = false;
                    }

                    if (!addParam.phone) {
                        errShow.phone = true;
                        isValid = false;
                    }

                    if (!addParam.address) {
                        errShow.address = true;
                        isValid = false;
                    }

                    if (!addParam.orderDate) {
                        errShow.orderDate = true;
                        isValid = false;
                    }

                    if (!addParam.deliveryDate) {
                        errShow.deliveryDate = true;
                        isValid = false;
                    }

                    return isValid;
                };

                // 验证更新订单表单
                const validateUpdateOrderForm = () => {
                    let isValid = true;

                    resetErrorShow();

                    if (!updateParam.orderNo) {
                        errShow.orderNo = true;
                        isValid = false;
                    }

                    if (!updateParam.customer) {
                        errShow.customer = true;
                        isValid = false;
                    }

                    if (!updateParam.phone) {
                        errShow.phone = true;
                        isValid = false;
                    }

                    if (!updateParam.address) {
                        errShow.address = true;
                        isValid = false;
                    }

                    if (!updateParam.orderDate) {
                        errShow.orderDate = true;
                        isValid = false;
                    }

                    if (!updateParam.deliveryDate) {
                        errShow.deliveryDate = true;
                        isValid = false;
                    }

                    return isValid;
                };

                // 验证添加订单明细表单
                const validateAddItemForm = () => {
                    let isValid = true;

                    resetErrorShow();

                    if (!addItemParam.cropId) {
                        errShow.cropId = true;
                        isValid = false;
                    }

                    if (!addItemParam.quantity || addItemParam.quantity <= 0) {
                        errShow.quantity = true;
                        isValid = false;
                    }

                    if (!addItemParam.price || addItemParam.price <= 0) {
                        errShow.price = true;
                        isValid = false;
                    }

                    return isValid;
                };

                // 验证更新订单明细表单
                const validateUpdateItemForm = () => {
                    let isValid = true;

                    resetErrorShow();

                    if (!updateItemParam.cropId) {
                        errShow.cropId = true;
                        isValid = false;
                    }

                    if (!updateItemParam.quantity || updateItemParam.quantity <= 0) {
                        errShow.quantity = true;
                        isValid = false;
                    }

                    if (!updateItemParam.price || updateItemParam.price <= 0) {
                        errShow.price = true;
                        isValid = false;
                    }

                    return isValid;
                };

                // 重置错误提示
                const resetErrorShow = () => {
                    Object.assign(errShow, {
                        orderNo: false,
                        customer: false,
                        phone: false,
                        address: false,
                        orderDate: false,
                        deliveryDate: false,
                        cropId: false,
                        quantity: false,
                        price: false,
                        addError: false,
                        updateError: false,
                        addItemError: false,
                        updateItemError: false
                    });
                };

                return {
                    currentView,
                    currentOrderId,
                    currentOrder,
                    currentOrderItems,
                    queryParam,
                    allOrders,
                    allOrderItems,
                    allCrops,
                    page,
                    filteredOrders,
                    addParam,
                    updateParam,
                    addItemParam,
                    updateItemParam,
                    errShow,
                    addDialogRef,
                    editDialogRef,
                    confirmDialogRef,
                    addItemDialogRef,
                    editItemDialogRef,
                    confirmItemDialogRef,
                    highlightText,
                    resetQuery,
                    query,
                    openAddDialog,
                    closeAddDialog,
                    addOrder,
                    openEditDialog,
                    closeEditDialog,
                    updateOrder,
                    openDeleteConfirmDialog,
                    closeDeleteConfirmDialog,
                    confirmDeleteOrder,
                    openOrderDetail,
                    goBackToList,
                    openAddItemDialog,
                    closeAddItemDialog,
                    addOrderItem,
                    openEditItemDialog,
                    closeEditItemDialog,
                    updateOrderItem,
                    openDeleteItemConfirmDialog,
                    closeDeleteItemConfirmDialog,
                    confirmDeleteOrderItem,
                    calculateTotalAmount,
                    calculateOrderTotal,
                    getCropName
                };
            }
        }).mount('#app');
    </script>
</body>
</html>    